让计数器数字有动画效果的jQuery插件animationCounter.js 示例-bootschool.net

animationCounter.js是一款小巧的给计数器数字赋予动画效果的jquery插件。它可以在数字从一个值变化到另外一个值时赋予动画效果。使用起来很简单，兼容ie8浏览器，非常实用。

入门指南

使用教程

1.引入依赖

<!--本示例使用一个图标库-->
<link rel="stylesheet" href="css/icon-font.min.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/animationCounter.js" charset="utf-8"></script>

2.HTML标签(部分代码)

<div class="block-wrapper">
    <div class="block">
        <p><span class="lnr lnr-heart"></span></p>
        <p class="counter-wrapper"><span class="fb"></span></p>
        <p class="text-block">喜欢</p>
    </div>
    <div class="block">
        <p><span class="lnr lnr-code"></span></p>
        <p class="counter-wrapper"><span class="code"></span></p>
        <p class="text-block">代码</p>
    </div>
    <div class="block">
        <p><span class="lnr lnr-bicycle"></span></p>
        <p class="counter-wrapper"><span class="bike"></span></p>
        <p class="text-block">自行车</p>
    </div>
    <div class="block">
        <p><span class="lnr lnr-history"></span></p>
        <p class="counter-wrapper"><span class="coffee"></span></p>
        <p class="text-block">咖啡</p>
    </div>
</div>

3.CSS样式(部分代码)

.block-wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 824px;
}

.block {
    color: #27ae60;
    float: left;
    border: 3px solid #27ae60;
    padding-top: 40px;
    width: 180px;
    height: 160px;
    margin: 10px
}

.block p {
    margin: 0;
}

.block p i {
    font-size: 40px;
    color: #27ae60;
}

.counter-wrapper {
    font-weight: 700;
    margin: 5px 0px 5px 0px;
    font-size: 25px;
}

.text-block {
    font-size: 17px;
}

.lnr-wrapper {
    margin-top: 20px
}

.lnr-heart, .lnr-code, .lnr-bicycle, .lnr-history {
    color: #27ae60;
    font-size: 45px;
}

4.JavaScript脚本初始化

$('#counter-block').ready(function () {
    $('.fb').animationCounter({
        start: 0,
        step: 1,
        delay: 100
    });
    $('.bike').animationCounter({
        start: 245677,
        step: 100,
        delay: 2000,
        txt: ' 千米'
    });
    $('.code').animationCounter({
        start: 0,
        end: 570,
        step: 4,
        txt: ' 行',
        delay: 1000
    });
    $('.coffee').animationCounter({
        start: 500,
        end: 1560,
        step: 20,
        delay: 900,
        txt: ' 杯'
    });
});

animationCounter.js参数描述：